<template>
  <view>
    <view class="u-p-24">
      <view class="top-card">
        <image class="ywch" src="../../static/icons/ywch.png" style="width: 150rpx;height: 130rpx;" mode=""></image>
        <view class="left flex-col align-center">
          <image src="../../static/icons/mendian.png" style="width: 110rpx;height: 110rpx;" mode=""></image>
          <view style="color: #C3C3C3;" class="u-font-30 u-p-16">门店消费</view>
        </view>

        <view class="right flex-col justify-around" style="width: 440rpx;height: 140rpx;">
          <view class="flex-row u-font-28">
            <view class="text-gray" style="width: 128rpx">预约人:</view>
            <view>王先生</view>
          </view>
          <view class="flex-row">
            <view class="text-gray" style="width: 128rpx">预约电话:</view>
            <view>18677543210</view>
          </view>
          <view class="flex-row">
            <view class="text-gray" style="width: 128rpx">预约时间:</view>
            <view>今天 12:30</view>
          </view>
        </view>
      </view>

      <view class="daohang ywch">
        <view class="btn">
          <image src="../../static/icons/daohang.png" style="width: 32rpx;height: 32rpx;"></image>
          <text class="u-p-l-8">导航</text>
        </view>

        <view class="status">
          <view class="u-font-30">等待买家付款</view>
          <view class="u-font-20">15分钟后自动关闭</view>
        </view>

        <view class="address">
          <view class="name u-line-1">仟吉KenGee</view>
          <view class="add u-line-2">河南省 郑州市 金水区 商务内环九如路海逸名门23号楼一单元6楼601</view>
        </view>
      </view>

      <view class="order-card">
        <view class="top">
          <u-avatar src="https://picsum.photos/id/409/200/200" mode="square" size="72"></u-avatar>
          <view class="name u-line-1">欧斯u地方</view>
          <uni-icons type="arrowright"></uni-icons>
        </view>

        <view class="items">
          <view class="item" v-for="i in 3" :key="i">
            <image class="pic" src="https://picsum.photos/id/409/200/200"></image>
            <view class="info">
              <view class="name u-line-1">美特斯邦威夹克</view>
              <view class="price u-line-1">x1</view>
            </view>
          </view>
        </view>

        <view class="info">
          <view class="row">
            <view class="left">商品总价</view>
            <view class="right">¥48.0</view>
          </view>
          <view class="row">
            <view class="left">商品总价</view>
            <view class="right">¥48.0</view>
          </view>
          <u-gap height="8"></u-gap>
          <view class="row">
            <view class="left">商品总价</view>
            <view class="right on">¥48.0</view>
          </view>
          <view class="row">
            <view class="left">优惠券</view>
            <view class="right on">
              <text>-¥48.0</text>
              <uni-icons type="arrowright" size="12" color="#FF511B"></uni-icons>
            </view>
          </view>
          <u-gap height="16"></u-gap>
          <view class="row">
            <view class="left text-black">需付款</view>
            <view class="right on">¥48.0</view>
          </view>
        </view>
      </view>

      <view class="info-card">
        <view class="row">
          <view class="left">订单编号: </view>
          <view class="right text-black">2019111111110123</view>
        </view>
        <view class="row">
          <view class="left">下单时间:</view>
          <view class="right text-black">2019-11-11 11:11</view>
        </view>
        <view class="row">
          <view class="left">支付方式: </view>
          <view class="right text-black">在线支付</view>
        </view>
        <view class="row">
          <view class="left">订单编号: </view>
          <view class="right text-black">2019111111110123</view>
        </view>
        <view class="row">
          <view class="left">下单时间:</view>
          <view class="right text-black">2019-11-11 11:11</view>
        </view>
        <view class="row">
          <view class="left">支付方式: </view>
          <view class="right text-black">在线支付</view>
        </view>
      </view>

      <view class="flex-row justify-between pay-btns">
        <view class="left">
          <view>优惠:21元</view>
          <view>合计:<text class="lg">￥138</text></view>
        </view>
        <view class="right">立即付款</view>
      </view>

      <view class="btns flex-row justify-between">
        <my-btn :size="[340, 80, 30]" bg="#3F3F3F" color="#fff" inline round>联系商家</my-btn>
        <my-btn :size="[340, 80, 30]" bg="linear-gradient(0deg, #72E0EB 0%, #95E6FE 100%)" color="#fff" inline round>联系商家</my-btn>
      </view>

      <view class="hexiao-card">
        <view style="width: 610rpx;height: 610rpx;background: #F6AD3C;"></view>

        <view class="text-gray u-font-38 u-p-t-24 u-p-b-24">核销码</view>
        
        <view class="hexiao">
          AK46 5312
        </view>
        
        <view class="u-p-t-24" style="color: #F6AD3C;">*提货时请展示核销二维码或告知商家核销码</view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {

      };
    }
  }
</script>

<style lang="scss">
  .top-card {
    width: 702rpx;
    height: 220rpx;
    background: #FFFFFF;
    border-radius: 20rpx;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx;

    .ywch {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 9;
    }
  }

  .daohang {
    width: 702rpx;
    height: 200rpx;
    background: #FFFFFF;
    border-radius: 20rpx;
    margin-top: 24rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16rpx;
    position: relative;

    .btn {
      width: 140rpx;
      height: 64rpx;
      background: #FFB849;
      border-radius: 0rpx 20rpx 0rpx 24rpx;
      position: absolute;
      top: 0;
      right: 0;
      z-index: 9;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .status {
      width: 240rpx;
      height: 162rpx;
      background: linear-gradient(0deg, #54CEDB 0%, #73E0EC 100%);
      border-radius: 12rpx;
      position: relative;
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      padding: 16rpx;

      &::after {
        content: '';
        width: 40rpx;
        height: 40rpx;
        background: #fff;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(50%, -50%) rotate(45deg);
      }
    }

    .address {
      width: 400rpx;
      height: 162rpx;
      color: #999999;
      font-size: 24rpx;

      .name {
        font-size: 28rpx;
        padding: 8rpx 0 16rpx 0;
      }
    }
  }

  .order-card {
    background: #fff;
    border-radius: 36rpx;
    padding: 24rpx;
    margin: 24rpx 0;

    .top {
      display: flex;
      align-items: center;

      .name {
        font-size: 26rpx;
        width: 560rpx;
        padding: 0 16rpx;
      }
    }

    .items {
      padding-top: 24rpx;

      .item {
        padding-bottom: 24rpx;
        display: flex;
        justify-content: space-between;
      }

      .pic {
        width: 100rpx;
        height: 100rpx;
        object-fit: cover;
        background: #e3dbda;
        border-radius: 8rpx;
      }

      .info {
        width: 530rpx;
      }

      .name {
        font-size: 28rpx;
      }

      .price {
        color: #999999;
        font-size: 24rpx;
      }
    }

    .info {
      font-size: 24rpx;
      color: #A6A6A6;

      .on {
        color: #FF511B;
      }

      .row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6rpx 0;
      }
    }
  }

  .info-card {
    background: #fff;
    border-radius: 36rpx;
    padding: 24rpx;
    margin: 24rpx 0;
    font-size: 24rpx;
    color: #A6A6A6;

    .row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 6rpx 0;
    }
  }

  .pay-btns {
    padding: 24rpx 8rpx;
    letter-spacing: 1px;

    .left {
      width: 476rpx;
      height: 80rpx;
      background: #3F3F3F;
      box-shadow: 1rpx 4rpx 7rpx 1rpx rgba(85, 68, 63, 0.2);
      border-radius: 40rpx 0rpx 0rpx 40rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 24rpx;
      color: #fff;
      padding: 0 32rpx;

      .lg {
        font-size: 28rpx;
      }
    }

    .right {
      width: 196rpx;
      height: 80rpx;
      background: linear-gradient(0deg, #72E0EB 0%, #95E6FE 100%);
      box-shadow: 1rpx 4rpx 7rpx 1rpx rgba(85, 68, 63, 0.2);
      border-radius: 0rpx 40rpx 40rpx 0rpx;
      font-size: 30rpx;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .hexiao-card {
    margin: 24rpx 0;
    width: 702rpx;
    background: #FFFFFF;
    border-radius: 20rpx;
    position: relative;
    display: flex;
    padding: 46rpx;
    flex-direction: column;
    
    .hexiao {
      width: 612rpx;
      height: 126rpx;
      background: #F1F1F1;
      border-radius: 8rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 60rpx;
      color: #272727;
    } 
  }
</style>
